<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="#">{{ route.meta.title }}</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 弹框 -->
        <el-button class="btn" type="primary" @click="addDialog">添加</el-button>
        <v-dialog :isShow="isShow" :isAdd="isAdd" @cancel="cancel" ref="dialogRef"></v-dialog>
        <!-- 列表数据 -->
        <v-list @edit="edit"></v-list>
    </div>
</template>
<script lang='ts' setup>
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import vDialog from './dialog.vue'
import vList from './list.vue'
let route = useRoute()
let isShow = ref(false) //控制弹框显示隐藏
let isAdd = ref(true) //控制弹框是 添加  还是  编辑
//针对于ref属性变量  如果要重新赋值必须使用  变量.value 才能实现视图的调用
const addDialog = () => {
    isShow.value = true
    isAdd.value = true
}
//弹框值为null
let dialogRef = ref()

//关闭弹框事件
const cancel = (e: boolean) => {
    isShow.value = e
}
//编辑菜单打开弹框事件
const edit = (e: number) => {
    isShow.value = true
    isAdd.value = false
    dialogRef.value.lookup(e)
}
</script>
<style lang='less' scoped>
.btn {
    margin: 10px 0;
}
</style>